<template>
  <div>
    <!-- style -->
    <!--<div v-html="css"></div>-->

    <div class="html-box" v-if="datas.list">

      <div style="text-align: center;font-size: 18px" v-if="datas.list.length <= 0">请设置显示板块内容</div>
      <template v-for="item in datas.list">
        <component
            :is="item.uikey" :parent_id="id"
            :id="item.id" :key="item.id"
            :datas="handleDatas(item.datas)">
        </component>
      </template>

    </div>
  </div>
</template>

<script>
	import emptyImage from '@/resource/images/image.png';
	import C_statistics from '../component/statistics';
	// 自定义样式
	const css = function () {
		// 	if(this.datas.preview_color) {
		// 		const {
		// 			preview_color,
		// 			text_color
		// 		} = this.datas;
		//
		// 		return `
		//     .component-${this.id} .html-box {
		//         background-color: ${preview_color.color};
		//         background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
		//         background-size: 100% 100%;
		//         background-position: center;
		//         background-repeat: no-repeat;
		//     }
		//
		//     .component-${this.id} .html-box .tool-box, .component-${this.id} .html-box .tool-boxlis{
		//         color: ${text_color};
		//     }
		// `;
		// 	}
	};

	export default {
		props: ["id", "datas"],
		data() {
			return {
				emptyImage
			};
		},
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-${this.id}`];
				return name;
			},
		},
		components: {
			C_statistics
		},
		methods: {
			// 功能数据
			handleDatas(old_data) {
				// 如果有配置项的话
				let new_datas = {};
				if (old_data) {
					Object.keys(old_data).map(key => {
						new_datas[key] = old_data[key].value;
					});
				}
				return new_datas;
			},
		},
	};
</script>

<style lang="less" scoped>
  * {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  // 默认
  .component-wrapper {
    width: 375px;
  }

  .html-box {
    min-height: 30px;
  }

  .data-item {
    padding: 10px 15px;
    font-size: 15px;
    text-align: left;
    .price {
      color: #f56c6c;
      font-size: 16px;
    }
  }
</style>
